<template>
	<view style="width: 750upx; padding-bottom: 10upx;">
		<swiper :autoplay="false" :indicator-dots="false" :current="currentTabClassIndex" @change="e => currentTabClassIndex = e.detail.current">
			<swiper-item v-for="(mainArr, index) in resdata" :key="index" class="px-1 row flex-wrap j-center">
				<view v-for="(item, ind) in mainArr" class="d-flex; flex-column a-center pt-1" style="width: 146upx;">
					<image :src="item.item.pic_url" style="width: 80upx; height: 80upx;"></image>
					<text class="font-sm py-1">{{ item.item.title }}</text>
				</view>
			</swiper-item>
		</swiper>
		<view class="d-flex j-center pt-2" v-if="resdata.length>1">
			<view 
				v-for="(item, index) in resdata"
				:class="index === currentTabClassIndex ? 'tab-class-active': '' "
				style="width: 30upx; height: 10upx; background-color: rgba(200, 200, 200, 0.5); margin: 0 5upx; border-radius: 10upx;"
			></view>
		</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			resdata: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {
				currentTabClassIndex: 0
			}
		}
	}
</script>

<style>
.tab-class-active {
	background-color: rgba(100, 100, 200, 0.7)!important;
}
</style>
